<template>
  <div class="model-library-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">三维模型库</h1>
      <p class="page-subtitle">选择车辆模型进行三维可视化</p>
    </div>

    <!-- 搜索和筛选区域 -->
    <div class="search-filter-section">
      <div class="search-box">
        <input 
          v-model="searchQuery" 
          type="text" 
          placeholder="搜索车辆型号、编号..."
          class="search-input"
        />
        <button class="search-btn">🔍</button>
      </div>
      
      <div class="filter-section">
        <select v-model="selectedCategory" class="filter-select">
          <option value="">所有类型</option>
          <option value="tank">主战坦克</option>
          <option value="armored">装甲车</option>
          <option value="artillery">自行火炮</option>
          <option value="missile">导弹车</option>
        </select>
        
        <select v-model="selectedStatus" class="filter-select">
          <option value="">所有状态</option>
          <option value="active">在役</option>
          <option value="maintenance">维修中</option>
          <option value="reserve">备用</option>
        </select>
      </div>
    </div>

    <!-- 车辆模型网格 -->
    <div class="models-grid">
      <div 
        v-for="model in filteredModels" 
        :key="model.id"
        class="model-card"
        @click="selectModel(model)"
        :class="{ 'selected': selectedModelId === model.id }"
      >
        <div class="model-image">
          <img :src="model.thumbnail" :alt="model.name" />
          <div class="model-status" :class="model.status">
            {{ getStatusText(model.status) }}
          </div>
        </div>
        
        <div class="model-info">
          <h3 class="model-name">{{ model.name }}</h3>
          <p class="model-type">{{ model.type }}</p>
          <p class="model-number">编号: {{ model.number }}</p>
          
          <div class="model-stats">
            <div class="stat-item">
              <span class="stat-label">传感器</span>
              <span class="stat-value">{{ model.sensors }}</span>
            </div>
            <div class="stat-item">
              <span class="stat-label">警报</span>
              <span class="stat-value" :class="{ 'alert': model.alerts > 0 }">
                {{ model.alerts }}
              </span>
            </div>
          </div>
          
          <div class="model-actions">
            <button 
              class="action-btn primary"
              @click.stop="viewModel(model)"
            >
              查看模型
            </button>
            <button 
              class="action-btn secondary"
              @click.stop="viewDetails(model)"
            >
              详细信息
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <button 
        class="page-btn"
        :disabled="currentPage === 1"
        @click="changePage(currentPage - 1)"
      >
        上一页
      </button>
      
      <span class="page-info">
        第 {{ currentPage }} 页，共 {{ totalPages }} 页
      </span>
      
      <button 
        class="page-btn"
        :disabled="currentPage === totalPages"
        @click="changePage(currentPage + 1)"
      >
        下一页
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

// 响应式数据
const searchQuery = ref('')
const selectedCategory = ref('')
const selectedStatus = ref('')
const selectedModelId = ref(null)
const currentPage = ref(1)
const itemsPerPage = 12

// 模拟车辆模型数据
const models = ref([
  {
    id: 1,
    name: 'ZTZ-99A主战坦克',
    type: '主战坦克',
    category: 'tank',
    number: 'T001',
    status: 'active',
    thumbnail: '/api/placeholder/300/200',
    sensors: 45,
    alerts: 2
  },
  {
    id: 2,
    name: 'ZBD-04步兵战车',
    type: '步兵战车',
    category: 'armored',
    number: 'A002',
    status: 'maintenance',
    thumbnail: '/api/placeholder/300/200',
    sensors: 32,
    alerts: 5
  },
  {
    id: 3,
    name: 'PLZ-05自行榴弹炮',
    type: '自行火炮',
    category: 'artillery',
    number: 'P003',
    status: 'active',
    thumbnail: '/api/placeholder/300/200',
    sensors: 28,
    alerts: 0
  },
  {
    id: 4,
    name: 'HQ-9防空导弹',
    type: '防空导弹',
    category: 'missile',
    number: 'M004',
    status: 'reserve',
    thumbnail: '/api/placeholder/300/200',
    sensors: 38,
    alerts: 1
  },
  {
    id: 5,
    name: 'ZTL-11突击炮',
    type: '突击炮',
    category: 'artillery',
    number: 'A005',
    status: 'active',
    thumbnail: '/api/placeholder/300/200',
    sensors: 25,
    alerts: 0
  },
  {
    id: 6,
    name: 'ZTD-05两栖突击车',
    type: '两栖突击车',
    category: 'armored',
    number: 'A006',
    status: 'active',
    thumbnail: '/api/placeholder/300/200',
    sensors: 30,
    alerts: 3
  }
])

// 计算属性
const filteredModels = computed(() => {
  let filtered = models.value

  if (searchQuery.value) {
    filtered = filtered.filter(model => 
      model.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      model.number.toLowerCase().includes(searchQuery.value.toLowerCase())
    )
  }

  if (selectedCategory.value) {
    filtered = filtered.filter(model => model.category === selectedCategory.value)
  }

  if (selectedStatus.value) {
    filtered = filtered.filter(model => model.status === selectedStatus.value)
  }

  const start = (currentPage.value - 1) * itemsPerPage
  const end = start + itemsPerPage
  return filtered.slice(start, end)
})

const totalPages = computed(() => {
  let filtered = models.value

  if (searchQuery.value) {
    filtered = filtered.filter(model => 
      model.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      model.number.toLowerCase().includes(searchQuery.value.toLowerCase())
    )
  }

  if (selectedCategory.value) {
    filtered = filtered.filter(model => model.category === selectedCategory.value)
  }

  if (selectedStatus.value) {
    filtered = filtered.filter(model => model.status === selectedStatus.value)
  }

  return Math.ceil(filtered.length / itemsPerPage)
})

// 方法
const getStatusText = (status) => {
  const statusMap = {
    active: '在役',
    maintenance: '维修中',
    reserve: '备用'
  }
  return statusMap[status] || status
}

const selectModel = (model) => {
  selectedModelId.value = model.id
}

const viewModel = (model) => {
  // 跳转到三维可视化页面
  console.log('查看模型:', model)
  // 这里应该路由到单车三维可视化页面
  // this.$router.push(`/3d-visualization/${model.id}`)
}

const viewDetails = (model) => {
  console.log('查看详细信息:', model)
  // 打开详细信息弹窗或跳转到详情页
}

const changePage = (page) => {
  currentPage.value = page
}

onMounted(() => {
  // 模拟加载数据
  console.log('三维模型库组件已加载')
})
</script>

<style scoped>
.model-library-container {
  width: 91vw;
  min-height: 100vh;
  padding: 2vw;
  background: #0c1120;
  color: #e6e6e6;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3vh;
  padding: 2vh 2vw;
  background: #121a2d;
  border-radius: 12px;
  border: 1px solid #2d3a4b;
}

.page-title {
  font-size: 3.5vw;
  margin: 0 0 1vh 0;
  font-weight: 700;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.page-subtitle {
  font-size: 1.8vw;
  margin: 0;
  opacity: 0.9;
}

.search-filter-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3vh;
  flex-wrap: wrap;
  gap: 2vw;
}

.search-box {
  display: flex;
  align-items: center;
  background: #121a2d;
  border-radius: 25px;
  padding: 0.5vh 1vw;
  border: 1px solid #2d3a4b;
}

.search-input {
  background: none;
  border: none;
  color: #e6e6e6;
  font-size: 1.4vw;
  padding: 1vh 1vw;
  outline: none;
  width: 25vw;
  min-width: 200px;
}

.search-input::placeholder {
  color: #bfcbd9;
}

.search-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5vw;
  cursor: pointer;
  padding: 0.5vh;
}

.filter-section {
  display: flex;
  gap: 1vw;
}

.filter-select {
  background: #121a2d;
  border: 1px solid #2d3a4b;
  border-radius: 10px;
  color: #e6e6e6;
  padding: 1vh 1.5vw;
  font-size: 1.2vw;
  outline: none;
  min-width: 120px;
}

.filter-select option {
  background: #121a2d;
  color: #e6e6e6;
}

.models-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 2vw;
  margin-bottom: 3vh;
}

.model-card {
  background: #121a2d;
  border-radius: 15px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #2d3a4b;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.model-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.4);
  border-color: #409EFF;
}

.model-card.selected {
  border-color: #409EFF;
  box-shadow: 0 0 20px rgba(64, 158, 255, 0.5);
}

.model-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.model-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.model-card:hover .model-image img {
  transform: scale(1.05);
}

.model-status {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 0.5vh 1vw;
  border-radius: 20px;
  font-size: 1vw;
  font-weight: 600;
  backdrop-filter: blur(10px);
}

.model-status.active {
  background: rgba(76, 175, 80, 0.8);
}

.model-status.maintenance {
  background: rgba(255, 152, 0, 0.8);
}

.model-status.reserve {
  background: rgba(96, 125, 139, 0.8);
}

.model-info {
  padding: 2vh 1.5vw;
}

.model-name {
  font-size: 1.6vw;
  margin: 0 0 0.5vh 0;
  font-weight: 600;
}

.model-type {
  font-size: 1.2vw;
  margin: 0 0 0.5vh 0;
  opacity: 0.8;
}

.model-number {
  font-size: 1.1vw;
  margin: 0 0 1.5vh 0;
  opacity: 0.7;
}

.model-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2vh;
}

.stat-item {
  text-align: center;
}

.stat-label {
  display: block;
  font-size: 1vw;
  opacity: 0.7;
  margin-bottom: 0.5vh;
}

.stat-value {
  display: block;
  font-size: 1.4vw;
  font-weight: 600;
}

.stat-value.alert {
  color: #f44336;
}

.model-actions {
  display: flex;
  gap: 1vw;
}

.action-btn {
  flex: 1;
  padding: 1vh 1vw;
  border: none;
  border-radius: 8px;
  font-size: 1.1vw;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-btn.primary {
  background: #409EFF;
  color: #fff;
}

.action-btn.primary:hover {
  background: #337ecc;
  transform: translateY(-2px);
}

.action-btn.secondary {
  background: #121a2d;
  color: #e6e6e6;
  border: 1px solid #2d3a4b;
}

.action-btn.secondary:hover {
  background: #263445;
  transform: translateY(-2px);
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2vw;
  margin-top: 3vh;
}

.page-btn {
  background: #121a2d;
  border: 1px solid #2d3a4b;
  color: #e6e6e6;
  padding: 1vh 2vw;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.2vw;
  transition: all 0.3s ease;
}

.page-btn:hover:not(:disabled) {
  background: #263445;
  transform: translateY(-2px);
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-info {
  font-size: 1.2vw;
  color: rgba(255,255,255,0.9);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-title {
    font-size: 6vw;
  }
  
  .page-subtitle {
    font-size: 3vw;
  }
  
  .search-input {
    font-size: 3vw;
    width: 50vw;
  }
  
  .filter-select {
    font-size: 2.5vw;
  }
  
  .models-grid {
    grid-template-columns: 1fr;
    gap: 4vw;
  }
  
  .model-name {
    font-size: 3.5vw;
  }
  
  .model-type {
    font-size: 2.5vw;
  }
  
  .model-number {
    font-size: 2.2vw;
  }
  
  .stat-label {
    font-size: 2vw;
  }
  
  .stat-value {
    font-size: 3vw;
  }
  
  .action-btn {
    font-size: 2.5vw;
  }
  
  .page-btn {
    font-size: 2.5vw;
  }
  
  .page-info {
    font-size: 2.5vw;
  }
}
</style>
